﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link href="fileuploader.css" rel="stylesheet" type="text/css">	
    <style>    	
		body {font-size:13px; font-family:arial, sans-serif; width:700px; margin:100px auto;}
    </style>	
</head>
<body>		
    <p><a href="http://github.com/valums/file-uploader">Back to project page</a></p>
    
	<p>To upload a file, click on the button below. Drag-and-drop is supported in FF, Chrome.</p>
	<p>Progress-bar is supported in FF3.6+, Chrome6+, Safari4+</p>
	
	<div id="file-uploader-demo1">		
		<noscript>			
			<p>Please enable JavaScript to use file uploader.</p>
			<!-- or put a simple form for upload here -->
		</noscript>         
	</div>
    
    <script src="fileuploader.js" type="text/javascript"></script>
    <script>        
        function createUploader(){            
            var uploader = new qq.FileUploader({
                element: document.getElementById('file-uploader-demo1'),
                action: 'do-nothing.htm',

                debug: true
            });           
        }

        function createUploader() {
            imgs = new Array();
            var uploader = new qq.FineUploader({
                element: document.getElementById('bootstrapped-fine-uploader'),
                request: {
                    endpoint: '../jsaction/Upload'
                },
                text: {
                    uploadButton: '<i class="icon-upload icon-white"></i> 请选择上传的文件',
                    retryButton: '<i class="icon-upload icon-trash"></i> '
                },
                template: '<div class="qq-uploader span12">' +
                            '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
                            '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
                            '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                          '</div>',
                classes: {
                    success: 'alert alert-success',
                    fail: 'alert alert-error'
                },
                debug: true,
                callbacks: {
                    onComplete: function (id, filename, result) {
                        imgs[id] = result.name;
                    }
                }

            });
        }
        
        // in your app create uploader as soon as the DOM is ready
        // don't wait for the window to load  
        window.onload = createUploader;     
    </script>    
</body>
</html>